<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>BlackNOTA</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="/webjars/layui/1.0.7/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/asset/css/global.css"/>
</head>
<body style="background-color: white">
<header>
    <div class="layui-header">
        <ul class="layui-nav" style="opacity: 1">
            <li style="float: left;"><img src="/asset/img/b_logo.png" height="60px" width="60px"></li>
            <li class="logo1"><p style="font-size: 25px">国药控股天津有限公司</p></li>
            <!--<li class="logo1"><a href="/" class="lp-title">政采对接系统</a></li>-->
            <li class="layui-nav-item"><a href="/">首页</a></li>
            <li class="layui-nav-item"><a href="/blog/addForm">订单处理</a></li>
            <li class="layui-nav-item">
                <a href="">系统管理<span class="layui-nav-more"></span></a>
                <dl class="layui-nav-child layui-anim layui-anim-upbit">
                    <dd><a href="/first">用户管理</a></dd>
                </dl>
            </li>
            <div style="float: right">
                <li class="layui-nav-item"><a href="/">您好@user.username@</a></li>
                <li class="layui-nav-item"><a href="/user/logout">注销</a></li>
            </div>
        </ul>
    </div>
</header>
<div id="allusers" style="margin:5% 5% 0 5%">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" v-model="text" placeholder="请输入关键字" class="layui-input search_input">
        </div>
        <a class="layui-btn search_btn" v-on:click="loadUsers">查询</a>
        <button v-on:click="addUser()" data-type="auto" class="layui-btn layui-btn-normal">添加</button>
    </div>
    <div class="layui-form news_list">
        <table class="layui-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>name</th>
                <!--<th>生日</th>-->
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="users_content">

            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>
                    <a class="layui-btn layui-btn-mini" v-on:click="editUser(user)"><i class="iconfont icon-edit"></i>
                        编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-mini" v-on:click="deleteUser(user)"><i
                            class="layui-icon">&#xe640;</i> 删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script type="text/javascript" src="/webjars/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/layui/1.0.7/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="/webjars/vue/2.5.13/vue.js"></script>
<script>
    var App = new Vue({
        el: '#allusers',
        data: {
            userList: '',
            text: ""
        },
        methods: {
            loadUsers: function () {
                var url = "/user/alluser";
                var _self = this;
                $.get(url, function (data) {
                    _self.userList = eval("(" + data + ")");
                })
            },
            editUser:function (user) {
                var id = '0drs3ul51eg36pvauqi88j0lg9';
                layer.open({
                    type: 2,
                    title: '修改用户',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area: ['600px', '320px'],
                    content: '/user/edit/'+user.id
                });
            },
            deleteUser:function (user) {
                layer.confirm('确定删除用户'+user.username+'？',{icon:3, title:'提示信息'},function(index){
                    $.post({
                        url: "/user/deleteUser/"+user.id,
                        success: function (obj) {
                            layer.msg(obj.msg);
                            App.loadUsers();
                        },
                        error: function(data) {
                            layer.msg("网络错误");
                        }
                    });
                    layer.close(index);
                    return false;
                });
            },
            addUser : function() {
                layer.open({
                    type: 2,
                    title: '添加用户',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area: ['600px', '320px'],
                    content: '/user/add/form'
                });
            }
        }
    });
    //初始化加载数据
    App.loadUsers();
</script>
</html>